<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="Bootstrap/js/bootstrap.min.js"></script>
    <style>
        *{margin: 0px;  padding: 0px;  font-size: 13px; list-style: none; }
        header{ height: 45px;  width: 100%;  background: #20a1a1;  text-align: center;  color: white;  font-size: 16px;  line-height: 45px;  z-index: 1;  }
        .info{ display: block;  margin-left: 10px;  }
        .price{  font-size: 14px;  font-weight: bold;  display: block;  color: red;  margin-left: 9px;  margin-top: 13px;  }
        .number{  font-size: 14px;  color: gray;  display: block;  margin: -22px 80%;  }
        .kind{  color: grey;  display: block;  margin-left: 10px;  margin-top: 5px;  }
        .show_info{  padding: 3px;  width: 63%;  height: 90px;  border: 0px solid red;  margin-top: -85px;  float: left;  margin-left: 31%;  }
        footer{  border: 0px solid gainsboro;  width: 100%;  height: 55px;  position: fixed;  bottom:50px;  background-color: white;  }
        footer li{  float: left;  height: 55px;  line-height: 55px;  border-right: 0px solid gainsboro;  text-align: center;  }
        .center{  width: 100%;  background-color:	#E8E8E8;  }
        .delet{  float: right;  color: red;  margin-top: 22px;margin-left: 25px  }
        .store{  height: 36px;  margin-top: -5px;  z-index: 0;  border-top: 0px;  }
        .store_img{  width: 15px;  height: 15px;  border-radius: 3px;  margin-top: -6px  }
        .store_name{  font-size: 13px;  }
        .store_icon{  font-size: 16px;  margin-left: 2%;  font-weight: bold;  }
        .store_checkbox{  margin-top: -10px;  }
        .show{  background-color:#F8F8F8;height:100px;border-top:0px;margin-bottom: 1px;  border-bottom: 2px solid #f8f8ff;  }
        .show_li{  border: 0;background-color:	#F8F8F8;width: 108%;height: 90px;margin-left: -3%;margin-top:0px;  }
        .product_img{  width: 85px;height: 85px;margin-top: -13px;  border-radius: 5px;  }
        .buy a{color: white;font-size: 18px}
        .buy a:link{text-decoration: none}
        .store_name a{color: black}
        .store_name a:link{text-decoration: none}
        .info_a{color: black}
        .info_a:link{color: black}
    </style>
    <script>
//        删除商品
                function delet(d) {
                    var r = confirm("确定要从购物车中删除此商品？");
                    if(r){
                        //提交删除请求
                        var productItemId =  $(d).attr("data-productItemId")
                        var url = "http://obao.tunnel.2bdata.com/cart!delete.htm?productItemId="+productItemId;
                        $.post(url);
                        var L=$(d).parents(".busines").find(".show").length;
                        if(L==1){
                            $(d).parents(".show").siblings(".store").remove();
                            $(d).parents(".show").remove();
                            selectde();
                        }else{
                            if($(d).parents(".busines").find(" input[class='product_checkbox']").length-1==$(d).parents(".busines").find(" input[class='product_checkbox']:checked").length){
                                $(d).parents(".busines").find(".store input[class='store_checkbox'] ").prop("checked",true);
                            }
                            $(d).parents(".show").remove();
                            selectde(d);
                        }
                        totalPrice();
                    }
                }
        //        删除的时候判断全选
                function selectde() {
                    var selected=$(".center").find(" input[name='check_name']").length;
                    var unselected=$(".center").find(" input[name='check_name']:checked").length;
                    if(selected==unselected){
                        $(".select_all").prop("checked",true);
                    }else {
                        $(".select_all").prop("checked",false);
                    }
                    if(selected==0){
                        $(".select_all").prop("checked",false);
                    }
                }
        //        全选/全不选
                function selected_all(d) {
                    if($(d).is(":checked")){
                        $("input[name='check_name']").prop("checked",true);
                    }else{
                        $("input[name='check_name']").prop("checked",false);
                    }
                    totalPrice();
                }
        //        商家全部选中的时候全选按钮选中
                function selected_store(d) {
                    if($(d).is(":checked")){
                        $(d).parents(".list-group").find("input[name='check_name']").prop("checked",true);
                    }else{
                        $(d).parents(".list-group").find("input[name='check_name']").prop("checked",false);
                    }
                    selected_product(d);
                }
        //          商品全部选中的时候店家也选中
                function selected_product(d) {
                    if($(d).parents(".busines").find(" input[class='product_checkbox']").length==$(d).parents(".busines").find(" input[class='product_checkbox']:checked").length){
                        $(d).parents(".busines").find(".store input[class='store_checkbox'] ").prop("checked",true);
                    }else{
                        $(d).parents(".busines").find(".store input[class='store_checkbox'] ").prop("checked",false);
                    }
                    if($(d).parents(".center").find(" input[name='check_name']").length==$(d).parents(".center").find(" input[name='check_name']:checked").length){
                        $(".select_all").prop("checked",true);
                    }else{
                        $(".select_all").prop("checked",false);
                    }
                    totalPrice();
                }
        //        计算总价
                function totalPrice() {
                    var price = 0;
                    var products = $(".show");
                    for(var i = 0; i < products.length; ++i){
                        var flag = $(".show").eq(i).find("input[class='product_checkbox']:checked");
                        if(flag.length != 0) {
                            price += parseFloat($(".show").eq(i).find(".product_price").text()*$(".show").eq(i).find(".product_number").text());
                        }
                    }
                    $(".totalPrice").text(price+"元");
                }
               $(function () {
                   $.ajax({
                       url:"http://obao.tunnel.2bdata.com/cart!findMyCart.htm?user.userId=2",
                       success:function (data) {
                           var str='';
                           for(var i=0;i<data.businessItems.length;i++){
                               //店名开始
                               var img = "http://obao.tunnel.2bdata.com/upload/business/"+data.businessItems[i].business.photo;
                               str+="<ul class='list-group busines' data-businessItemId='"+data.businessItems[i].businessItemId+"'>";
                               str+="<li class='list-group-item store'>";
                               str+="<input type='checkbox' class='store_checkbox' name='check_name' onclick='selected_store(this)'>";
                               str+="&nbsp;&nbsp;<img src='"+img+"' class='store_img'>";
                               str+="<span class='store_name'><a href='businesslist.html'>"+data.businessItems[i].business.name+"</a><span class='store_icon'>></span></span>";
                               str+="</li>";
                               //店名结束
                               for(var j = 0 ;j<data.businessItems[i].productItems.length;j++){
                                   //商品开始
                                   var id = data.businessItems[i].productItems[j].product.productId;
                                   var src = "info.html?"+id;
                                   str+="<a href='"+src+"'class='info_a'><li class='list-group-item show'><ul class='list-group'>";
                                   str+="<li class='list-group-item show_li' >";
                                   str+="<input type='checkbox' class='product_checkbox' data-id='"+data.businessItems[i].productItems[j].productItemId+"' style='margin-left:-10px' name='check_name' onclick='selected_product(this)'>";
                                   str+="&nbsp;<img src='http://obao.tunnel.2bdata.com/upload/product/"+data.businessItems[i].productItems[j].product.productImg+"' class='product_img'></a>";
                                   str+="<span class='delet' data-productItemId='"+data.businessItems[i].productItems[j].productItemId+"' onclick='delet(this)'>删除</span>";
                                   str+="<a href='"+src+"' class='info_a'><div class='show_info'>";
                                   str+="<span class='info'>"+data.businessItems[i].productItems[j].product.productName+"</span>";
                                   str+="<span class='kind'>";
                                   str+="<span style='font-size:12px'>"+data.businessItems[i].productItems[j].productSize.size+"、"+data.businessItems[i].productItems[j].productFlavor.name+"</span>" ;
                                   str+="</span>";
                                   str+="<span class='price'>";
                                   str+="<span style='font-size:16px'>￥</span>";
                                   str+="<span style='color:red;font-size:14px' class='product_price'>"+data.businessItems[i].productItems[j].productSize.price+"</span>";
                                   str+="元</span>";
                                   str+="<span class='number'><span>x</span><span class='product_number'>"+data.businessItems[i].productItems[j].productNumber+"</span></span>";
                                   str+="</div>";
                                   str+="</li>";
                                   str+="</ul>";
                                   str+="</li></a>";
                               }
                               str+="</ul>";
                               //  商品结束
                           }
                           str+="<div style='height: 45px;background-color: white'></div>";
                           $(".center").html(str);
                       }
                   })
               });
        //结算
        function payingBill() {
            var businessItemId = $(".busines");
            var productItemId = $(".product_checkbox");
            var businessItemIds = "";
            var productItemIds= "";
            for(var i = 0;i<businessItemId.length;i++){
                businessItemIds+=$(businessItemId[i]).attr("data-businessItemId")+"MD5";
            }
            for(var i = 0;i<productItemId.length;i++){
                var isChecked =$(productItemId[i]).is(':checked');
                if(isChecked){
                        productItemIds+=$(productItemId[i]).attr("data-id")+"MD5";
                }
            }
            if(productItemIds==""){
                alert("请选择要结算的商品！");
            }else{
               var str="http://obao.tunnel.2bdata.com/placeorder.html?UIDS"+businessItemIds+"UIDS"+productItemIds;
                $("#sub").attr({href:str});
            }
        }
    </script>
</head>
<body>
<header class="header">
  <span style="font-size: 16px;font-weight: bold">购物车</span>
</header>
<div class="center">

</div>
<div style="height: 40px">
</div>
<footer style="margin-bottom: -5px;">
    <ul>
        <li class="message" style="width: 20%;">
            <input type="checkbox" id="select" class="select_all" name="check_all" onclick='selected_all(this)'>&nbsp;
            <label for="select">全选</label>
        </li>
        <li class="collect" style="width: 40%;">
            合计:<span style="color: red;font-size: 16px;font-weight: bold">
               ￥</span>
             <span style="color: red;font-size: 16px;font-weight: bold" class="totalPrice">
            0</span>
        </li>
        <li class="buy" style="width: 40%;background: darkorange;color: white;font-size: 18px">
            <a  id="sub" onclick="payingBill();" target="_parent">结算</a>
        </li>
    </ul>
</footer>
</body>
</html>